<template>
  <el-dialog :visible="visibleDialog" append-to-body class="promoter_person" title="选择成员" width="620px">
    <div class="person_body clear">
      <div class="person_tree float-left">
        <el-input v-model="searchVal" placeholder="搜索成员" prefix-icon="el-icon-search"
                  class="mb10"
                  @input="getDebounceData(searchVal)"
        />
        <p v-if="!searchVal" class="ellipsis tree_nav ml5">
          <span class="ellipsis" @click="getDepartmentList(firstDept.id)">{{ firstDept.label }}</span>
          <span v-for="(item,index) in departments.titleDepartments" :key="index+'a'"
                class="ellipsis" @click="getDepartmentList(item.id)"
          >
            <i class="el-icon-arrow-right" />
            {{ item.label }}</span>
        </p>
        <ul>
          <li v-for="(item,index) in departments.childDepartments" :key="index+'b'"
              class="check_box not"
          >
            <a>
              <i class="icon-wenjianjia iconfont" />
              {{ item.label }}</a>
            <i class="icon-xiaji_line iconfont" @click="getDepartmentList(item.id)">下级</i>
          </li>
          <li v-for="(item,index) in departments.employees" :key="index+'c'" class="check_box">
            <a :class="func.toggleClass(checkedEmployessList,item)&&'active'" :title="item.label"
               @click="func.toChecked(checkedEmployessList,item)"
            >
              <i class="iconfont icon-yonghutouxiang" />
              {{ item.nickName }} （{{ item.userName }}）</a>
          </li>
        </ul>
      </div>
      <div class="has_selected float-left">
        <p class="clear">
          已选（{{ total }}）
          <a @click="delList">清空</a>
        </p>
        <ul>
          <li v-for="(item,index) in checkedEmployessList" :key="index+'e'">
            <i class="iconfont icon-yonghutouxiang" />
            <span>{{ item.nickName }}</span>
            <i class="el-icon-close" @click="func.removeEle(checkedEmployessList,item)" />
          </li>
        </ul>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:visible',false)">取 消</el-button>
      <el-button type="primary" @click="saveDialog">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import mixins from './mixins'

export default {
  mixins: [mixins],
  props: ['visible', 'data'],
  data() {
    return {
      checkedEmployessList: []
    }
  },
  computed: {
    total() {
      return this.checkedEmployessList.length
    }
  },
  watch: {
    visible(val) {
      this.visibleDialog = this.visible
      if (val) {
        this.getDepartmentList()
        this.searchVal = ""
        this.checkedEmployessList = this.data.map(({name, userName, id}) => ({
          nickName: name,
          userName: userName,
          id: id
        }))
      }
    },
    visibleDialog(val) {
      this.$emit('update:visible', val)
    }
  },
  created() {

  },
  methods: {
    saveDialog() {
      let checkedList = this.checkedEmployessList.map((item) => ({
        id: item.id,
        userName: item.userName,
        nickName: item.nickName
      }))
      this.$emit('change', checkedList)
    },
    delList() {
      this.checkedEmployessList = []
    }
  }
}
</script>

<style scoped>
@import "./dialog.css";
</style>
